<template>
  <el-card class="profile-card">
    <template #header>
      <div class="card-header">
        <span>员工基本信息与数据</span>
      </div>
    </template>
    <div v-if="employee.employee" class="profile-content">
      <!-- 基本信息 -->
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="姓名">{{
          employee.employee.name
        }}</el-descriptions-item>
        <el-descriptions-item label="学历">{{
          employee.employee.education
        }}</el-descriptions-item>
        <el-descriptions-item label="工作年限"
          >{{ employee.employee.workYears }}年</el-descriptions-item
        >
        <el-descriptions-item label="当前岗位">{{
          employee.employee.position
        }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{
          employee.employee.department
        }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{
          employee.employee.email
        }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{
          employee.employee.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="入职日期">{{
          employee.employee.joinDate
        }}</el-descriptions-item>
      </el-descriptions>

      <!-- 培训记录 -->
      <div class="section">
        <div style="display: flex; justify-content: space-between">
          <h3>培训记录</h3>
          <router-link
            :to="{
              path: '/employee-data',
              query: { name: employee.employee.name, type: 'px' },
            }"
            style="
              color: #409eff;
              text-decoration: none !important;
              margin-right: 15px;
            "
            >数据追溯</router-link
          >
        </div>

        <el-table
          :data="employee.employee.trainingRecords"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="courseName" label="课程名称" />
          <el-table-column prop="courseType" label="课程类型" />
          <el-table-column prop="trainingDate" label="培训日期" width="120" />
          <el-table-column prop="score" label="考核分数" width="100">
            <template #default="scope">
              <el-tag :type="getScoreType(scope.row.score)">
                {{ scope.row.score }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="trainingHours" label="培训时长" width="100" />
          <el-table-column prop="instructor" label="讲师" />
          <el-table-column prop="status" label="状态" width="80">
            <template #default="scope">
              <el-tag
                :type="scope.row.status === '已完成' ? 'success' : 'warning'"
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 绩效数据 -->
      <div class="section">
        <div style="display: flex; justify-content: space-between">
          <h3>绩效记录</h3>
          <router-link
            :to="{
              path: '/employee-data',
              query: { name: employee.employee.name, type: 'jx' },
            }"
            style="
              color: #409eff;
              text-decoration: none !important;
              margin-right: 15px;
            "
            >数据追溯</router-link
          >
        </div>
        <el-table
          :data="employee.performances"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="period" label="考核周期" width="120" />
          <el-table-column prop="evaluationDate" label="评估日期" width="140" />
          <el-table-column prop="overallScore" label="综合评分" width="140">
            <template #default="scope">
              <el-rate
                v-model="scope.row.overallScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="leadershipScore"
            label="绩效领导力"
            width="140"
          >
            <template #default="scope">
              <el-rate
                v-model="scope.row.leadershipScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </template>
          </el-table-column>
          <el-table-column prop="technicalScore" label="技术能力" width="140">
            <template #default="scope">
              <el-rate
                v-model="scope.row.technicalScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="communicationScore"
            label="人际交往能力"
            width="140"
          >
            <template #default="scope">
              <el-rate
                v-model="scope.row.communicationScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="achievements"
            label="主要成果"
            show-overflow-tooltip
          />
        </el-table>
      </div>
    </div>

    <el-empty v-else description="暂无员工数据" />
  </el-card>
</template>

<script>
import { ref } from "vue";

export default {
  name: "EmployeeProfile",
  props: {
    employee: {
      type: Object,
      default: null,
    },
  },
  setup() {
    const loading = ref(false);

    const getScoreType = (score) => {
      if (score >= 9) return "success";
      if (score >= 7) return "warning";
      return "danger";
    };

    return {
      loading,
      getScoreType,
    };
  },
};
</script>

<style scoped>
.profile-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}

.profile-content {
  padding: 10px 0;
}

.section {
  margin-top: 30px;
}

.section h3 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}
</style>
